<template>
  <div class="content-box">
    <div class="box-code">
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
        border-card
      >
        <el-tab-pane label="文档" name="first" class="h-full">
          <MarkdownContainer
            :docText="rawReadmeContent"
            style="height: calc(100vh - 39px)"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="box-cesium">
      <div class="cesium-header">
        <el-button type="primary" size="small" @click="handleBackPage()"
          >返回</el-button
        >
        <div class="header-title">{{ options.title }}</div>
      </div>
      <div id="cesium-container">
        <Gui
          @staBtn="staBtn"
          @cloBtn="cloBtn"
          @sliChange="sliChange"
          :controlDatas="controlDatas"
          :btnArray="btnArray"
          :title="title"
        ></Gui>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, onUnmounted } from "vue";
import MarkdownContainer from "@/components/MarkdownContainer/index.vue";
import Gui from "@/components/Gui/index.vue";
import rawReadmeDoc from "./README.md?raw"; // 文档
import rawData from "./data"; // 配置的数据
import { useRouter } from "vue-router";
import Scene3DTileset from "@/util/scene3DTileset.js";

const router = useRouter();

const activeName = ref("first");
const rawReadmeContent = ref(rawReadmeDoc);
const options = ref(rawData);
const handleClick = (tab, event) => {
  console.log(tab, event);
};
const handleBackPage = (path) => {
  if (path) {
    router.push(path);
  } else {
    router.back();
  }
};

/* Cesium代码 */
let viewer = null;
const title = "倾斜风格";
const btnArray = ref(["无", "重置"]);
const controlDatas = reactive([
  {
    label: "对比度",
    name: "contrast",
    type: "slider",
    value: 1,
    step: 1,
    min: 0,
    max: 10
  },
  {
    label: "饱和度",
    name: "saturation",
    type: "slider",
    value: 1,
    step: 1,
    min: 0,
    max: 10
  },
  {
    label: "明亮度",
    name: "brightness",
    type: "slider",
    value: 1,
    step: 1,
    min: 0,
    max: 10
  }
]);
const baseURL = import.meta.env.VITE_APP_BASE_URL;
const initCesium = () => {
  const options = {
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
    selectionIndicator: false,
    infoBox: false,
    scene3DOnly: true,
    contextOptions: {
      webgl: {
        alpha: true,
        depth: true,
        stencil: true,
        antialias: true,
        premultipliedAlpha: true,
        preserveDrawingBuffer: true,
        failIfMajorPerformanceCaveat: true
      },
      allowTextureFilterAnisotropic: true,
      requestWebgl1: true
    },
    baseLayer: Cesium.ImageryLayer.fromProviderAsync(
      Cesium.TileMapServiceImageryProvider.fromUrl(
        Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
      )
    )
  };

  viewer = new Cesium.Viewer("cesium-container", options);
  //视角跳转
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(113.624802, 34.743841, 15000.0)
  });
  addTileset(viewer, 'http://101.200.90.35/datasource/3DTileset/modeFactory/tileset.json');
};

onMounted(() => {
  initCesium();
});

//添加倾斜
let tileset = null;
let sceneTool = null;
const addTileset = async (viewer, url) => {
  sceneTool = new Scene3DTileset();
  tileset = await Cesium.Cesium3DTileset.fromUrl(url);
  sceneTool.adjustModelStyle(tileset);
  viewer.scene.primitives.add(tileset);
  viewer.flyTo(tileset);
};

const staBtn = () => {};
const sliChange = (e) => {
  if (!tileset) return;
  const { l, v } = e;
  tileset.customShader.setUniform(l, v);
};
const cloBtn = () => {
  controlDatas.forEach((e) => {
    e.value = 1;
    tileset.customShader.setUniform(e.name, e.value);
  });
};
onUnmounted(() => {
  viewer.destroy();
  viewer = null;
});
</script>

<style scoped lang="scss">
.content-box {
  display: flex;
  width: 100vw;
  height: 100vh;
  .box-code {
    width: 500px;
    height: 100%;
  }
  .box-cesium {
    width: calc(100% - 500px);
    height: 100%;
    .cesium-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 39px;
      padding: 0 10px;
      .header-title {
        margin: auto;
      }
    }
    #cesium-container {
      position: relative;
      width: 100%;
      height: calc(100% - 39px);
    }
  }
}
</style>

<style scoped>
:deep(.el-tabs__header) {
  margin: 0;
}

:deep(.el-tabs__content) {
  padding: 0 !important;
}

:deep(.el-tabs--border-card) {
  border: 0 !important;
}
</style>
